﻿.web-uploader { position: absolute; border: 1px solid #808080; height: 503px; width: 800px; margin: auto; margin-top: 60px; box-shadow: #0094FF 2px 2px 2px; }
.web-uploader-body { height: 447px; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; }
    .web-uploader-body > div { flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; }
        .web-uploader-body > div:first-child { flex: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex: 0; }
.web-uploader-title { width: 160px; height: 47px; border-bottom: 1px solid #ddd; background-color: #0193E5; color: #fff; }
.web-uploader-title-text { display: block; text-align: center; line-height: 47px; }

/*层提示*/
.web-uploader-layre { display: none; position: absolute; font-weight: bold; top: 0; width: 100%; padding: 13px; background-color: rgba(222, 99, 96, 0.9); color: #fff; text-align: center; }

.w-u-t-r { position: relative; cursor: all-scroll; width:auto!important }

/*右上角关闭按钮*/
.web-uploader-colse { color: #fff; position: absolute; top: 0; right: 0; padding: 3px 10px 3px 10px; }
    .web-uploader-colse:hover { background-color: #C9302C; color: #fff; text-decoration: none !important; }
/*左边*/
.web-uploader-left { width: 120px; background-color: #EEEEF2; width: 160px; }


/*右边*/
.w-u-nav { list-style: none; margin: 0; padding: 0; }
    .w-u-nav > li { float: left; position: relative; display: block; }
        .w-u-nav > li > a { position: relative; display: block; text-decoration: none !important; padding: 13px 20px; border-radius: 0; border-top: 0px !important; color: #fff; }
            .w-u-nav > li > a:hover { background-color: #457493; }
        .w-u-nav > li.active { background-color: #115380; }
.clear-bottom-border { border-bottom: 0px; }
.web-uploader-right { background-color: #F3F2F3; }
.web-uploader-img-body { overflow: hidden; }
/*上传图片*/
.web-uploader-dire { padding: 6px; color: #666; }
.web-uploader-tip { color: #806c6c; }
    .web-uploader-tip > span { border-bottom: #0094ff 1px solid; }
.web-uploader-img-main { display: none; height: 400px; overflow-y: auto; }
.web-uploader-img-ul { position: relative; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; }
    .web-uploader-img-ul > li { float: left; cursor: pointer; margin: 6px; background-color: #fff; padding: 7px; border: 1px solid #fff; }
        .web-uploader-img-ul > li:hover { border-color: #0094ff; }
        .web-uploader-img-ul > li > div { position: relative; cursor: pointer; text-decoration: none !important; display: block; width: 126px; height: auto; }
            .web-uploader-img-ul > li > div:hover { text-decoration: none !important; }
            .web-uploader-img-ul > li > div > img { display: block; margin: auto; width: auto; height: 80px; }
.web-uploader-img-top { display: none; position: absolute; width: 100%; background-color: rgba( 0, 0, 0, 0.5 ); text-align: right; }
    .web-uploader-img-top > a { text-decoration: none !important; color: #fff; display: inline-block; padding: 2px 10px 2px 10px; }

/*删除单个按钮*/
.web-uploader-img-singledel { }
    .web-uploader-img-singledel:hover { background-color: rgba( 0, 0, 0, 1 ); }

/*上传单个文件描述*/
.web-uploader-img-message { display: none; position: absolute; bottom: 0; width: 100%; background-color: rgba(239, 11, 11, 0.8); color: #fff; text-align: center; }
.web-uploader-img-name { margin-top: 3px; clear: both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.web-uploader-img-size { text-align: right; color: #808080; }
    .web-uploader-img-size > i { font-size: 9px; }



/*在线(我的图片)start*/
.web-uploader-online-dire { }
.web-uploader-online-dire-ul { list-style: none; margin: 0; padding: 0; font-size: 13px; height: 400px; overflow-y: auto; }
    .web-uploader-online-dire-ul > li { cursor: pointer; padding: 3px; }
        .web-uploader-online-dire-ul > li > i { background-image: url(../img/web-up-file.png); background-size: 120%; display: inline-block; width: 15px; height: 15px; background-position: 0px 2px; }
        .web-uploader-online-dire-ul > li > span { padding-left: 6px }
        .web-uploader-online-dire-ul > li:hover { background-color: #1C97EA; color: #fff; }
        .web-uploader-online-dire-ul > li.active { background-color: #007ACC; color: #fff; border-bottom: 1px solid #ddd; }

/*右边*/
.web-online-img-main { height: 400px; overflow-y: scroll; }
/*分组*/
.web-online-title { position: relative; font-size: 13px; color: #AB8787; padding: 6px 6px 0px 6px; }
.web-online-titles::before { position: absolute; content: ""; width: 1%; height: 1px; background-color: #ABA0A0; bottom: 0px; }
.web-online-grous { clear: both; }

.web-online-img-ul { position: relative; list-style: none; margin: 0; padding: 0; }
    .web-online-img-ul > li { position: relative; float: left; cursor: pointer; margin: 6px; background-color: #fff; padding: 7px; border: 1px solid #fff; }
.o-ul-select > span { position: absolute; width: 40px; height: 40px; right: 0; bottom: 0; background-image: url(../img/success.png); background-repeat: no-repeat; }
.web-online-img-ul > li:hover { border-color: #0094ff; }
.web-online-img-ul > li > div { position: relative; cursor: pointer; text-decoration: none !important; display: block; width: 126px; height: auto; text-align: center; }
    .web-online-img-ul > li > div:hover { text-decoration: none !important; }
    .web-online-img-ul > li > div > img { max-width: 100%; height: 80px; display: inline-block; }
.web-online-img-top { display: none; position: absolute; width: 100%; background-color: rgba( 0, 0, 0, 0.5 ); text-align: right; }
    .web-online-img-top > a { text-decoration: none !important; color: #fff; display: inline-block; padding: 2px 10px 2px 10px; }
.web-online-img-singledel { }
    .web-online-img-singledel:hover { background-color: rgba( 0, 0, 0, 1 ); }
.web-online-img-message { display: none; position: absolute; bottom: 0; width: 100%; background-color: rgba( 0, 0, 0, 0.5 ); color: #fff; text-align: center; }
    .web-online-img-message:hover { background-color: rgba( 0, 0, 0, 0.9 ); }
.web-online-img-name { margin-top: 3px; clear: both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/*在线(我的图片)end*/
/*底部*/
.web-uploader-bottom { padding: 10px; background-color: #ddd; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; }
    .web-uploader-bottom > div { flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; }
        .web-uploader-bottom > div:last-child { text-align: left; }
            .web-uploader-bottom > div:last-child > input { width: 100px; }

/*进度条*/
.web-uploader-progress > div { display: none; height: 17px; margin-bottom: 0px; border-radius: 0px; }
    .web-uploader-progress > div > div { text-align: right; font-size: 13px; padding-right: 6px; }
/*单个图片进度条*/
.web-uploader-img-progress > div { height: 17px; margin-bottom: 0px; border-radius: 0px; }
/*上传按钮*/
.web-uploader-addimg { position: relative; padding: 0; width: 100px; height: 34px; line-height: 34px; }
    .web-uploader-addimg div { cursor: pointer; }
    .web-uploader-addimg > div:last-child { width: auto; height: 34px !important; opacity: 0; cursor: pointer; }
        .web-uploader-addimg > div:last-child > input[type=file] { height: 34px; width: auto; cursor: pointer; }
/*底部*/
.web-uploader-bottom-left { }
    .web-uploader-bottom-left > p { padding: 0; margin: 0; }

#btn-retry-upload { display: none; }

.a { font-family: webu; }
/*搜索*/
.web-uploader-search { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; }
    .web-uploader-search > div { flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; }
.search-select { cursor: pointer; border-radius: 0; border: 0; height: 41px; background-color: #0193E5; color: #fff; }

/*默认上传打开*/
.uploader-dis { display: none; }
.uploader-show { display: block; }

/*层*/
.web-uploader-bg { display: none; z-index: 9999999999999999998; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(191, 165, 165, 0.5); }
.web-uploader-body-main { display: none; z-index: 9999999999999999998; margin: auto; width: 800px; }
